<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <script src="./echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" type="text/echarts.min.js">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
                    grid: {
                         top: '3%' //距离上边的距离
                         },
                    xAxis: {
                        type: 'category',
                        data: ['', '', '', '', '', '', ''],
                        axisLabel:{
                            rotate:-45,
                        }
                    },
                     yAxis: [{
                        type: 'value',
                        min: 0,
                        max: function(value) {
                             return Math.ceil(value.max * 1.5);
                        },
                        splitArea: {
                        show: true
                        }}],
                    tooltip : {
                             trigger: 'axis',
                                 axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                          },

                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        barCategoryGap:'50%',
                        itemStyle: {

                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                            //   "color": function(params){return "#29AAE3" }
                                // 定制显示（按顺序）
                                color: function(params) {


                                    if(params.value>0 && params.value<=50 ){
                                        return '#00EE00';
                                    } else if(params.value>50 && params.value<=100){
                                         return '#EFE42A';
                                    }else if(params.value>100 && params.value<=150){
                                         return '#EE9201';
                                    }else if(params.value>150 && params.value<=200){
                                         return '#C33531';
                                    }else if(params.value>200 && params.value<=350){
                                         return  '#9933FA';
                                    }else if(params.value>300 && params.value<=1000){
                                         return '#C33531';
                                    }

                                }
                            },

                        },
                    }]
                };


        function setDate(echartJson){
            option.xAxis.data = JSON.parse(echartJson);
        }

		function loadEcharts(echartJson){
                option.series[0].data = JSON.parse(echartJson);
                if (option &&typeof option ==="object") {
                    myChart.setOption(option,true);
                }
            }

    </script>
</body>
</html>